<script setup>
import { ref, onMounted } from 'vue';
import api from '@/api';

// 响应式数据
const items = ref([]);
const newItem = ref({
  name: '',
  description: '',
  price: 0
});

// 生命周期钩子
onMounted(async () => {
  await fetchItems();
});

// 方法
const fetchItems = async () => {
  try {
    const response = await api.getItems();
    items.value = response.data;
  } catch (error) {
    console.error('获取项目失败:', error);
  }
};

const addItem = async () => {
  try {
    const response = await api.createItem(newItem.value);
    items.value.push(response.data);
    // 重置表单
    newItem.value = { name: '', description: '', price: 0 };
  } catch (error) {
    console.error('添加项目失败:', error);
  }
};

const removeItem = async (id) => {
  try {
    await api.deleteItem(id);
    items.value = items.value.filter(item => item.id !== id);
  } catch (error) {
    console.error('删除项目失败:', error);
  }
};
</script>